<template>
  <div class="home-container">
    <h2 class="welcome">欢迎使用后台管理系统</h2>
    <div class="app-grid">
      <router-link 
        v-for="menu in appMenus" 
        :key="menu.path"
        :to="menu.path"
        class="app-item"
      >
        <div class="app-icon">
          <el-icon :size="32"><component :is="menu.meta?.icon" /></el-icon>
        </div>
        <span class="app-name">{{ menu.meta?.title }}</span>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 获取应用菜单列表
const appMenus = computed(() => {
  const rootRoute = router.options.routes.find(route => route.path === '/')
  return rootRoute?.children?.filter(route => 
    route.path !== '' && route.meta?.title && !route.children
  ) || []
})
</script>

<style scoped lang="scss">
.home-container {
  padding: 20px;

  .welcome {
    text-align: center;
    margin-bottom: 40px;
    font-size: 24px;
    color: #1a1a1a;
    font-weight: 500;
  }

  .app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;

    .app-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 30px 20px;
      background: #fff;
      border-radius: 12px;
      transition: all 0.3s;
      text-decoration: none;
      cursor: pointer;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

        .app-icon {
          background: var(--el-color-primary-light-7);
          
          :deep(svg) {
            color: var(--el-color-primary);
            transform: scale(1.1);
          }
        }
      }

      .app-icon {
        width: 64px;
        height: 64px;
        background: var(--el-color-primary-light-9);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;
        transition: all 0.3s;

        :deep(svg) {
          color: var(--el-color-primary-light-3);
          transition: all 0.3s;
        }
      }

      .app-name {
        font-size: 16px;
        color: #1a1a1a;
        font-weight: 500;
      }
    }
  }
}
</style> 